{% extends 'base.html' %}
{% load staticfiles %}
{% block main %}
    <table class="layui-table" id="test" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="update">更新</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="{% static 'layui.all.js' %}"></script>
    <script>
        var maina = document.getElementById("main_body");
        var mainh = maina.offsetHeight - 50;
        var mainw = maina.offsetWidth-55;
        console.log(mainh);
{#        option = {#}
{#            height: mainh,#}
{#            width: mainw#}
{#        };#}

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , $ = layui.$
                , element = layui.element; //元素操作


            //执行渲染
            table.render({
                elem: '#test',
                id: 'test',
                url: '/demo/table/user/',
                height: mainh,
                width: mainw,
                limit:10,
                page: true,
                cols: [[ //标题栏
                    {checkbox: true}
                    , {field: 'id', align: 'center', title: 'ID', width: "10"}
                    , {field: 'companyid', align: 'center', title: '公司ID', width: "10"}
                    , {field: 'companyname', align: 'center', title: '公司名称', width: "20"}
                    , {field: 'zcellname', align: 'center', title: 'zcell服务器名称', width: "20"}
                    , {field: 'zcellpid', align: 'center', title: 'node名称', width: "20"}
                    , {field: 'zcellip', align: 'center', title: 'zcell外网IP', width: "20"}
                    , {fixed: 'right', width: "20", align: 'center', toolbar: '#barDemo'}
                ]]
            });
            //监听工具条
            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            table.on("tool(test)", function (obj) {
                console.log('success');
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var checkStatus = table.checkStatus('test');
                console.log(checkStatus.data); //获取选中行的数据
                console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
                console.log(checkStatus.isAll); //表格是否全选
{#                if (layEvent === 'detail') {#}
{#                    layer.msg('查看操作');#}
{#                } else if (layEvent === 'del') {#}
{#                    layer.confirm('真的删除行么',#}
{#                        function (index) {#}
{#                            obj.del(); //删除对应行（tr）的DOM结构#}
{#                            layer.close(index);#}
{#                            //向服务端发送删除指令#}
{#                        });#}
{#                } else if (layEvent === 'update') {#}
{#                    layer.msg('更新操作');#}
{#                    //修改数据#}
{#                    obj.update({#}
{#                        username: '123',#}
{#                        title: 'xxx'#}
{#                    });#}
{#                }#}
            });
        })
    </script>

{% endblock main %}

